<template>
	<view class="cu-modal bottom-modal"  :class="is_show ? 'show' : ''">
		<view class="cu-dialog">
			<view class="popup-main bg-white">
				<view class="popup-main">
					<view class="scell">
						<view class="scell-l">
							<image class="" :src="$imgUrl + goods.thumb" lazy-load="false"> </image>
						</view>
						<view class="scell-r">
							<view class="scname">{{ goods.name }}</view>
							<view class="scsub">{{ goods.mdl }}</view>
							<view class="cz-p">
								<text class="pi mprice">¥</text>
								<text class="cz-num mprice">{{ goods.activity_price }}</text>
							</view>
						</view>
					</view>
					<view class="attr-box" v-if="goods.mdl">
						<view class="attr-cell">
							<view class="attr-label">
								规格
							</view>
							<view class="attr-valus">
								<view class="attr-tag attr-tag-act ">
									{{ goods.mdl }}
								</view>
							</view>
						</view>
					</view>
					<view class="cz-box">
						<view class="cz-l">
							数量
						</view>
						<view class="cz-r">
							<view class="czr-jian" :class="num==1?'jian-dis':''" @click="reduceGoods"> - </view>
							<view class="czr-num">{{ num }}</view>
							<view class="czr-jia" @click="addGoods"> + </view>
						</view>
					</view>
					<view class="pbtns" v-if="goods.stock != 2">
						<view class="pbtn" @click.stop="addCart">
							加入购物车
						</view>
						<view class="pbtn pbtn-act" @click.stop="goPay">
							立即购买
						</view>
					</view>
					<view class="pbtns pbtn-full" v-else>
						<view class="pbtn pbtn-dis">
							已售罄
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="mask" @click.stop="maskClose"></view>
	</view>

</template>

<script setup>
const {proxy} = getCurrentInstance()
const emit = defineEmits(['update:modelValue', 'addCart']);
const props = defineProps({
	modelValue: { required: true },
	goods: {
		type: Object,
		default: {}
	}
})
const is_show = ref(false)

//监听数据
watch(
    () => props.modelValue,
    (value) => {
        is_show.value = value
    },
    { immediate: true }
);

const num = ref(1)
function reduceGoods() {
	if(num.value == 1) return
	num.value--
}

function addGoods() {
	num.value++
}

function maskClose() {
	is_show.value = false
	emit('update:modelValue', is_show.value)
}

async function addCart() {
	let res = await proxy.$api('CartAdd', {gid: props.goods.id, count: num.value})
	if(res.code == 0){
		is_show.value = false
		emit('update:modelValue', is_show.value)
		emit('addCart')
		proxy.$toast('成功加入购物车')
	}
}

async function goPay() {
	is_show.value = false
	emit('update:modelValue', is_show.value)
	proxy.$go(`/pages/pay/pay?gid=${props.goods.id}&count=${num.value}`)
}
</script>
<style lang="scss" scoped>
.mask{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}
.cu-dialog{
	z-index: 2;
}
.popup-main {
	width: 100%;
	height: auto;
	background: #fff;
	border-radius: 20rpx 20rpx 0 0;
	position: relative;

	.pbtns {
		width: 100%;
		height: auto;
		padding: 20rpx;
		display: grid;
		gap: 20rpx;
		grid-template-columns: repeat(2, 1fr);

		.pbtn {
			
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			border: 1px solid $main_color;
			color: $main_color;
			background: #fff;
			border-radius: 80rpx;
		}

		.pbtn-act {
			color: #fff;
			background: $main_color;
		}

	}
	.pbtn-full{
		grid-template-columns: repeat(1, 1fr);
		gap: 0;
		.pbtn-dis{
			background-color: #ececec;
			border: 1px solid #ececec;
			color: #999;
		}
	}

	.scell {

		width: 100%;
		height: auto;
		background: #fff;
		display: flex;
		padding: 30rpx;
		border-bottom: 1px solid #f3f9ff;
		border-radius: 20rpx 20rpx 0 0;

		.scell-l {
			width: 140rpx;
			height: 140rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}

		.scell-r {
			flex: 1;
			height: auto;
			padding: 0 10rpx 0 20rpx;
			text-align: left;

			.scname {
				font-size: 30rpx;
				font-weight: 500;
				margin-bottom: 12rpx;
			}

			.scsub {
				font-size: 24rpx;
				color: #999;
				margin-bottom: 12rpx;
			}

			.cz-p {
				color: #000;
				font-weight: bold;
				margin-right: 20rpx;
				display: flex;
				align-items: center;
				.pi{
					font-size: 24rpx;
					margin-right: 8rpx;
				}
				.cz-num {
					font-size: 32rpx;

				}
			}
		}
	}

	.attr-box {
		width: 100%;
		height: auto;
		padding: 30rpx;

		.attr-cell {
			width: 100%;
			height: auto;
			display: flex;
			align-items: center;

			.attr-label {
				color: #000;
				font-size: 26rpx;
			}

			.attr-valus {
				// margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				padding-left: 30rpx;

				.attr-tag {
					display: inline-block;
					padding: 8rpx 24rpx;
					font-size: 24rpx;
					color: #000;
					background-color: #f3f9ff;
					border-radius: 8rpx;
					margin-right: 20rpx;
					border: 1px solid #f3f9ff;
				}

				.attr-tag-act {
					color: #fff;
					background-color: $main_color;
					border: 1px solid $main_color;
				}
			}
		}
	}

	.cz-box {
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;

		.cz-l {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #000;

		}

		.cz-r {
			width: 240rpx;
			border: 1px solid #ececec;
			display: flex;
			align-items: center;
			color: #000;
			border-radius: 8rpx;
			.czr-num {
				flex: 1;
				line-height: 70rpx;
				text-align: center;
			}

			.czr-jian,
			.czr-jia {
				width: 70rpx;
				line-height: 70rpx;
				text-align: center;
			}
			.jian-dis{
				color: #999;
			}
		}
	}

}
</style>